<template>
  <a-row :gutter="10" class="box">

    <!-- 表头 -->
    <a-col :md="24" :sm="24">
      <div class="header_left breadcrumb">
        <a-breadcrumb>
          <a-breadcrumb-item>
            <div class="icon_box" style="float: left;">
              <i class="iconfont icon-31shouyexuanzhong"></i>
            </div>
            <div style="float: left; line-height: 30px;"> &nbsp; &nbsp; &nbsp;ESG数聚宝(ESG Databot)/</div>
            <div style="float: left; line-height: 30px;"><a href="">数据填报</a></div>
          </a-breadcrumb-item>
        </a-breadcrumb>
      </div>
    </a-col>

    <!-- 标题任务栏 -->
    <a-col :md="24" :sm="14">
      <div style=" font-weight: bold; font-size: 18px;">
        <a-form :form="form" style="max-width: 55%;  margin: 5px auto 0; ">
          <a-form-model-item label="任务名称">
            <a-select default-value="张三的任务" placeholder="请选择任务名称">
              <a-select-option value="张三的任务">张三的任务</a-select-option>
              <a-select-option value=">李四的任务">李四的任务</a-select-option>
              <a-select-option value="王五的任务">王五的任务</a-select-option>
              <a-select-option value="赵六的任务">赵六的任务</a-select-option>
              <a-select-option value="田七的任务">田七的任务</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form>
      </div>
    </a-col>

    <!-- 填写数据列表 -->
    <a-col :md="24" :sm="24">
      <a-row class="content">
        <a-col :span="5">

          <!-- 标题 -->
          <h3>填写数据列表</h3>

          <!-- 搜索框 -->
          <a-input-search placeholder="关键字查询" @change="onChange" />

          <!-- 树结构 -->
          <div class="tree">
            <a-tree defaultExpandAll :showIcon="true" @select="onSelect">
              <a-icon class="icon-cls" slot="switcherIcon" type="minus-circle" style="font-size: 16px" />
              <template v-if="treedatalist.length > 0">
                <a-tree-node v-for="item in treedatalist" :key="item.key" :title="item.title">
                  <a-icon class="icon-cls" slot="icon" :type="item.icon.type" :theme="item.icon.theme" />
                  <template v-if="item.children">
                    <a-tree-node v-for="x in item.children" :key="x.key">
                      <span slot="title">
                        {{ x.title }}
                        <span v-if="x.details" class="company-details">{{ x.details }}</span>
                      </span>
                      <a-icon class="icon-cls" slot="icon" :type="x.icon.type" :theme="x.icon.theme" />
                      <template v-if="x.children">
                        <a-tree-node v-for="y in x.children" :key="y.key">
                          <a-icon class="icon-cls" slot="icon" type="file" theme="filled" />
                          <span slot="title">

                            <template >
                              
                              <a-checkbox v-if="y.type" :checked="defaultCheck" @click="onTreeChange" />
                              <a-icon v-else :type="y.icon.type" :theme="y.icon.theme"
                                :style="{ 'color': y.icon.color || '' }" class="icon-cls" />
                              <span style="margin-left: 10px;" @click="goNewForm(y.path, y.title,y)">{{ y.title }}</span>
                            </template>
                            <span v-if="y.details" class="company-details">{{ y.details }}</span>
                          </span>
                        </a-tree-node>
                      </template>
                    </a-tree-node>
                  </template>
                </a-tree-node>
              </template>
            </a-tree>·
          </div>
        </a-col>
        <!-- 右侧展示区 -->
        <a-col :span="19">
          <DatafillingChildren :title="keyword" @modelData="getModelData" :extra="newextra"></DatafillingChildren>
        </a-col>
      </a-row>
    </a-col>
  </a-row>
</template>
<script>

import axios from 'axios'

import { getAction } from '@/api/manage'

import DatafillingChildren from './DatafillingChildren'

const getParentKey = (key, tree) => {
  let parentKey
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i]
    if (node.children) {
      if (node.children.some((item) => item.key === key)) {
        parentKey = node.key
      } else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children)
      }
    }
  }
  return parentKey
}

import { mapState } from 'vuex'
export default {
  data() {
    return {
      form: {},
      expandedKeys: [],
      searchValue: '',
      autoExpandParent: true,
      defaultCheck: true,
      model: {
        source: '',
        data1: '',
        consume: ''
      },
      // 模拟数据
      treeData: [],

      treeData1: [],
      keyword: '',//选中的tree指标
      newextra:{},
    }
  },
  components: { DatafillingChildren },
  created() {
    this.handlegetData();
    //this.getData()
  },



  mounted() {
    // 获取tree的数据

    this.$store.dispatch('getTreeList')

    // this.treeData = this.$store.state.datafilling.treeData[0]
    
  },
  computed: {
    ...mapState({
      treedatalist: state => state.datafilling.treeData,

    })
  },
  updated(){
    console.log(1)
   
  },
    methods: {
    getModelData(val) {
      this.$store.dispatch('savetreeLISt', val)
    },
    filterTreeData() {

    },
    // 获取tree的数据
    // async treeValue() {
    //   const result = await axios.get('/mock/treeData')
    //   this.treeData = result.data.data
    //   // console.log(result.data.data, '获取DOM树模拟数据---------------')
    // },

    handlegetData() {
      getAction(`/esg-api/databot/gri/queryTreeList`)
        .then((res) => {
          if (res.success) {
            this.treeData1 = res.result[0];
            // console.log(666);
            // console.log(this.treeData);
          }
        })
        .catch(() => {

        });
    },

    // 获取数据
    getData() {
      axios.get('/treeData').then((res) => {
        // console.log("请求回来的内容")
        // console.log(22222222222)
        // console.log(res.data.dataSource)
        this.treeData = res.data.dataSource
      })
    },

    onTreeChange(e) {
      this.defaultCheck = !this.defaultCheck
      // console.log(`checked = ${this.defaultCheck}`)
    },

    onChange(e) {
      const value = e.target.value
      const expandedKeys = dataList.map((item) => {
        if (item.title.indexOf(value) > -1) {
          return getParentKey(item.key, gData)
        }
        return null
      }).filter((item, i, self) => item && self.indexOf(item) === i)
      Object.assign(this, {
        expandedKeys,
        searchValue: value,
        autoExpandParent: true
      })
    },

    onSelect(selectedKeys, info) {
      // console.log('selected', selectedKeys, info,'//我是tree点击的是')
    },

    // 点击左侧树结构展示右侧数据
    goNewForm(url, title,scoped) {
      // console.log(url,title, '展示点击的对应的值')
      // console.log(this.$router)
      this.keyword = title
      console.log(scoped,'////template')
      if(scoped){
        this.newextra = scoped
      }else{
        scoped = {
          title:'',
          area:'',
        }
        this.newextra = scoped
      }
      
      // if (!url || this.$router.currentRoute.fullPath == url) return
      // if (!url || this.$route.fullPath == url + '?title=' + title) return
      // this.$router.push({
      //   path: url,
      //   query: {
      //     title
      //   }
      // })
    }
  }
}
</script>
<style lang="scss" scoped="scoped">
.box {
  background-position: bottom center;
  _background: url(../../../assets/img/about_1.jpg) no-repeat !important;
  _background: url(../../../assets/img/assets/bg_1.png) !important;
  background: url(../../../assets/img/banner1.0.png) !important;
  _background: url(../../../assets/img/blue2.jpg) !important;

  _height: 140px;
  _width: 100%;
}

.breadcrumb {
  padding: 10px 15px;
  border: 1px solid #eee;
  _margin-bottom: 15px;
  margin: 24px 12px;
  _background: #f5f5f5;
  _background: url(../../../assets/img/about-banner1.png);
  background: url(../../../assets/img/banner1.0.png);
  background-position: center center;
  background-size: cover;

  .icon_box {
    width: 30px;
    height: 30px;
    background: #4bc076;
    border-radius: 5px;
    color: #fff;
    line-height: 30px;

    i {
      color: #fff;
      font-size: 26px;
    }
  }
}

*::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

/*滚动条凹槽的颜色 */
*::-webkit-scrollbar-track-piece {
  background-color: #f8f8f8;
  border-radius: 2em;
}

/*滚动条的背景色 圆角等设置*/
*::-webkit-scrollbar-thumb {
  background-color: #dddddd;
  background-clip: padding-box;
  border-radius: 2em;
}

/*滚动条的鼠标移上去效果*/
*::-webkit-scrollbar-thumb:hover {
  background-color: #bbb;
}

.content {
  //height: 710px;
  //height: 1000px;
  // height: calc(100% - 55px) !important;
  height: 1500px !important;
  background: #fff;
  margin-top: 15px;
  border-top: 1px solid #eee;
  _background: #d5eff3 !important;

  .icon-cls {
    font-size: 16px;
    color: rgb(24, 144, 255);
  }

  .ant-row {
    _height: 710px;
    height: calc(100% - 55px);
    background: #fff !important;
  }

  .ant-col-5 {
    //height: 100%;
    height: calc(100% - 55px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    //左侧菜单背景
    _background: #d5eff3 !important;

    h3 {
      text-align: left;
      padding-left: 15px;
      font-weight: bold;
      border-left: 3px solid rgb(27, 150, 255);
    }

    ::v-deep .ant-input-search {
      .ant-input {
        height: 35px !important;
        margin-top: 20px;
        border-radius: 20px;
      }

      .ant-input-suffix {
        top: 70%;
      }

      .ant-input-suffix {
        font-size: 18px;
      }
    }

    .tree {
      margin-top: 15px;
      text-align: left;

      .company-details {
        display: inline-block;
        margin-left: 20px;
        padding: 0 15px;
        border-radius: 15px;
        font-size: 12px;
        background: #ff4b19;
        _background: #1890ff;

        color: #fff;
      }
    }
  }
}
</style>
